import { createDesignTimeElement } from 'components/common';
import { UserApplication, UserPage } from 'user/application';
import { DesignTimeUserApplication } from 'components/designTimeUserApplication';
import React = require('react');
import ReactDOM = require('react-dom');
import { PageMaster, Action } from 'maishu-chitu';
const h = createDesignTimeElement;
console.log(h);

requirejs(['css!lib/devices.css']);


export type MobileContextArgument = {
    app: UserApplication,
    page: UserPage,
    storeColor: StyleColor
}
export const VirtualMobileContext = React.createContext<MobileContextArgument>({ app: null, page: null, storeColor: null })


interface Props extends React.Props<VirtualMobile> {
    scale?: number,
    color?: string,
    // pageData?: PageData,
    displayMobile?: boolean,
    // pageRender?: Action
}

export class VirtualMobile extends React.Component<Props, {}>{
    userApp: DesignTimeUserApplication;
    private _screenElement: HTMLElement;
    constructor(props) {
        super(props);
        this.state = {};
    }

    get screenElement() {
        return this._screenElement;
    }

    async componentDidMount() {
        this.userApp = new DesignTimeUserApplication(this.screenElement);
        // let action: Action = this.props.pageRender || (async (page: UserPage, app: PageMaster) => {
        //     let styleColor = await this.userApp.styleColor();
        //     ReactDOM.render(<VirtualMobileContext.Provider value={{ app: this.userApp, page, styleColor }} >
        //         <div >
        //         </div>
        //         {this.props.children}
        //     </VirtualMobileContext.Provider>, page.element)
        // })

        // this.props.children ?
        // async (page: UserPage, app: PageMaster) => {
        //     ReactDOM.render(<React.Fragment>
        //         {this.props.children}</React.Fragment>, page.element);
        // } :

        let action: Action = async (page: UserPage, app: PageMaster) => {
            let styleColor = await this.userApp.styleColor();
            let children = this.props.children ? this.props.children : <div></div>
            ReactDOM.render(<VirtualMobileContext.Provider value={{ app: this.userApp, page, storeColor: styleColor }} >
                {children}
            </VirtualMobileContext.Provider>, page.element)
        }

        //this.userApp.designPageNode.action =
        this.userApp.setDesignPageAction(action)
        this.userApp.showDesignPage();
    }

    render() {
        let scale = this.props.scale != null ? this.props.scale : 1;
        let color = this.props.color ? this.props.color : 'blue';
        let displayMobile = this.props.displayMobile == null ? true : this.props.displayMobile;
        // let styleColor = this.state.styleColor;

        if (this.userApp != null && this.userApp.currentPage != null) {
            this.userApp.currentPage.reload();
        }
        else if (this.userApp != null && this.userApp.currentPage == null) {
            this.userApp.showDesignPage();
        }

        let mainElement = <div className="screen"
            ref={(e: HTMLElement) => {
                this._screenElement = e || this._screenElement;
            }}>
        </div>


        return displayMobile ?
            <div className={`marvel-device iphone5c ${color}`} style={{ transform: `scale(${scale})` }}>
                <div className="top-bar"></div>
                <div className="sleep"></div>
                <div className="volume"></div>
                <div className="camera"></div>
                <div className="sensor"></div>
                <div className="speaker"></div>
                {mainElement}
                <div className="home"></div>
                <div className="bottom-bar"></div>
            </div> :
            <div>
                {mainElement}
            </div>
    }


}

